<template>
  <div class="device">
    <el-page-header @back="goBack" :content="title"> </el-page-header>
    <div class="content">
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        label-position="left"
      >
        <el-form-item label="装备模型名称" v-if="type == 'model'">
          <el-select
            v-model="form.nameOne"
            placeholder="请选择"
            style="width: 400px"
            @change="selectnameOne"
          >
            <el-option
              v-for="item in templateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="装备名称" v-if="type == 'model'">
          <el-input class="ipt" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="装备模型名称" v-if="type == 'equip'">
          <el-input class="ipt" v-model="form.name"></el-input>
        </el-form-item>
        <el-button @click="addattribute" type="primary" v-if="type == 'equip'"
          >添加属性</el-button
        >
        <el-table :data="form.tableData" :height="maxHeight" size="mini">
          <el-table-column label="属性名称">
            <template slot-scope="{ row }">
              <el-input
                v-model="row.attributeName"
                placeholder="请输入单位"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="属性类型" prop="attributeValueType">
            <template slot-scope="{ row }">
              <el-select
                v-model="row.attributeValueType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="值" prop v-if="type == 'model'">
            <template slot-scope="{ row }">
              <div v-if="row.attributeValueType != 1">
                <el-input v-model="row.unit" placeholder="请输入值"></el-input>
              </div>
              <div v-else style="display: flex; align-items: center">
                <el-input v-model="row.unit" placeholder="请输入值"></el-input>
                <span>~</span>
                <el-input v-model="row.unit" placeholder="请输入值"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="单位" prop>
            <template slot-scope="{ row }">
              <el-input v-model="row.unit" placeholder="请输入单位"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop width="64">
            <template slot-scope="scope">
              <el-button type="text" @click="cancelAttribute(scope)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <div class="btn">
      <el-button type="primary" @click="changeSure">确定</el-button>
      <el-button @click="goBack">取消</el-button>
    </div>
  </div>
</template>
<script>
import {
  saveEquipTemplate,
  getEquipList,
  getTemplateDetail,
  saveEquip,
} from "../../../../api/equip";
export default {
  data() {
    return {
      maxHeight: "calc(100vh - 420px)",
      title: "新增模型",
      type: "model",
      form: {
        nameOne: "",
        name: "",
        tableData: [],
      },
      options: [
        {
          value: "0",
          label: "值",
        },
        {
          value: "1",
          label: "范围",
        },
      ],
      templateList: [],
    };
  },
  mounted() {
    this.type = this.$route.query.type;
    if (this.type == "equip") {
      this.title = "新增模型";
    } else {
      this.title = "新增型号";
      this.templateList = [];
      getEquipList({ type: this.$route.query.id })
        .then((res) => {
          const { code, data } = res?.data;
          if (code == 200) {
            data.forEach((item) => {
              this.templateList.push({
                label: item.templateName,
                value: item.templateId,
              });
            });
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    }
  },
  methods: {
    goBack() {
      this.$router.push(`/app/equip/${this.$route.query.name}`);
    },
    addattribute() {
      this.form.tableData.push({
        attributeName: "",
        attributeType: 0,
        attributeValueType: "",
        unit: "",
      });
    },
    cancelAttribute(row) {
      this.form.tableData.splice(row.$index, 1);
    },
    changeSure() {
      if (this.type == "equip") {
        const data = {
          templateName: this.form.name,
          templateType: this.$route.query.id,
          attributes: this.form.tableData,
        };
        saveEquipTemplate(data)
          .then((res) => {
            const { code, msg } = res?.data;
            if (code == 200) {
              this.$router.push(`/app/equip/${this.$route.query.name}`);
            } else {
              this.$message.error(msg);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      } else {
        const data = {
          templateId: "",
          equipmentName: "",
          attributes: [],
        };
        saveEquip(data).then((res) => {
          console.log(res);
        });
      }
    },
    selectnameOne(val) {
      getTemplateDetail({ templateId: val })
        .then((res) => {
          const { code, data, msg } = res?.data;
          if (code == 200) {
            this.form.tableData = data;
            this.detail = true;
          } else {
            this.$message.error(msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.btn {
  margin-top: 24px;
  text-align: right;
}
.content {
  margin-top: 24px;
}
:deep(.el-input).ipt {
  width: 400px;
}
</style>
